<template>
  <a-modal
    :title="modelTitle"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          label="菜单KEY"
          help="给菜单定义一个英文名,常用在访问路径组合"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input
            v-decorator="['menu_key', {rules: [{required: true, message: '菜单KEY不能为空'}]}]"
            placeholder="请输入菜单名称"/>
        </a-form-item>
        <a-form-item
          label="菜单名"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input
            v-decorator="['menu_name', {rules: [{required: true, message: '菜单名不能为空'}]}]"
            placeholder="请输入菜单名称"/>
        </a-form-item>
        <a-form-item
          label="描述"
          help="权限说明"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-textarea
            v-decorator="['description']"
            :autoSize="{ minRows: 2, maxRows: 6 }"
            placeholder="输入菜单描述"/>
        </a-form-item>
        <a-form-item
          label="绑定组件名称"
          help="该名称用于选择使用哪个Vue组件渲染，该配置常由开发配置，需要在`router/generator-routers.js`的`constantRouterComponents`常量中定义对应的路由表才可使用"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input
            v-decorator="['component', {rules: [{required: true, message: '菜单KEY不能为空'}]}]"
            placeholder="请输入菜单组件名称"/>
        </a-form-item>
        <a-form-item
          label="菜单图标"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <icon-selector v-model="iconClass" @change="handleIconChange"/>
        </a-form-item>
        <a-form-item
          label="绑定权限"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-tree-select
            showSearch
            :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
            placeholder="请选择菜单绑定权限"
            allowClear
            :treeData="treePermData"
            treeNodeFilterProp="title"
            treeDefaultExpandAll
            v-decorator="['perm_id']"
          >
          </a-tree-select>
        </a-form-item>
        <a-form-item
          label="是否隐藏菜单"
          help="该是否不在导航栏中显示"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-switch
            checked-children="是"
            un-checked-children="否"
            v-decorator="['hidden', { rules:[],valuePropName: 'checked' }]"/>
        </a-form-item>
        <a-form-item
          label="是否隐藏头部内容"
          help="是否隐藏面包屑和页面标题栏"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-switch
            checked-children="是"
            un-checked-children="否"
            v-decorator="['hidden_header_content', { rules:[], valuePropName: 'checked' }]"/>
        </a-form-item>
        <a-form-item
          label="是否隐藏子菜单"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-switch
            checked-children="是"
            un-checked-children="否"
            v-decorator="['hide_children', { rules:[], valuePropName: 'checked' }]"/>
        </a-form-item>
        <a-form-item
          label="页面路径"
          help="使用该值可设定页面访问路径，否则使用菜单key组合成页面路径"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input
            v-decorator="['path']"
            placeholder="请输入重定向地址"/>
        </a-form-item>
        <a-form-item
          label="重定向地址"
          help="如果设置该值，则访问该路由时会自动重定向到该地址"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input
            v-decorator="['redirect']"
            placeholder="请输入重定向地址"/>
        </a-form-item>
        <a-form-item
          label="菜单链接跳转目标"
          help="设置了重定向地址，可通过该选项设置打开链接方式"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-select v-decorator="['target']" placeholder="请选择重定向打开方式">
            <a-select-option value="">请选择</a-select-option>
            <a-select-option value="_blank">在新窗口中打开被链接</a-select-option>
            <a-select-option value="_self">在相同的框架中打开被链接</a-select-option>
            <a-select-option value="_parent">在父框架集中打开被链接</a-select-option>
            <a-select-option value="_top">在整个窗口中打开被链接</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="排序"
          help="数字越小越靠前"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input-number v-decorator="['order_num', { initialValue: 0 }]" :min="1"/>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
    import IconSelector from '@/components/IconSelector'
    import { saveData } from '@/api/system/sysmenu'
    import { pick } from 'lodash'

    export default {
        components: {
            IconSelector
        },
        data () {
            return {
                labelCol: {
                    xs: { span: 24 },
                    sm: { span: 7 }
                },
                wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 13 }
                },
                visible: false,
                confirmLoading: false,
                form: this.$form.createForm(this),
                id: 0,
                parentId: 0,
                iconClass: ''
            }
        },
        props: {
            treePermData: {
                type: Array,
                default: () => {
                  return []
                }
            },
            groupId: {
                type: Number,
                default: 0
            }
        },
        computed: {
            modelTitle: function () {
                if (this.id === 0) {
                    if (this.parentId === 0) {
                        return '新建权限'
                    } else {
                        return '新建子权限'
                    }
                } else {
                    return '编辑权限'
                }
            }
        },
        methods: {
            add () {
                this.visible = true
                this.id = 0
                this.parentId = 0
                this.iconClass = ''
                const { form: { resetFields } } = this
                this.$nextTick(() => {
                    resetFields()
                })
            },
            addChild (record) {
                if (!record) {
                    this.$message.error('请选中您想要添加子节点的权限')
                    return false
                }
                this.visible = true
                this.id = 0
                this.parentId = record.id
                const { form: { resetFields } } = this
                this.$nextTick(() => {
                    resetFields()
                })
            },
            edit (record) {
                if (!record) {
                    this.$message.error('请选中您想要编辑的权限')
                    return false
                }
                record.perm_id = record.perm_id.toString()
                this.visible = true
                this.id = record.id
                this.parentId = record.parent_id
                const { form: { setFieldsValue } } = this
                this.$nextTick(() => {
                    setFieldsValue(pick(record, ['menu_key', 'menu_name', 'perm_id', 'component', 'hidden', 'hidden_header_content', 'hide_children', 'redirect', 'target', 'order_num']))
                    this.iconClass = record.icon
                })
            },
            handleIconChange (icon) { // 处理图标选择
                this.iconClass = icon
            },
            handleSubmit () {
                const { form: { validateFields } } = this
                this.confirmLoading = true
                validateFields((errors, values) => {
                    if (!errors) {
                      console.log(values)
                        values.perm_id = parseInt(values.perm_id)
                        saveData(Object.assign(values, {
                            id: this.id,
                            parent_id: this.parentId,
                            group_id: this.groupId,
                            icon: this.iconClass
                        })).then(res => {
                            this.confirmLoading = false
                            if (res.code === 0) {
                                this.visible = false
                                this.$message.success(res.message)
                                this.$emit('ok', values)
                            } else {
                              this.$message.error(res.message)
                            }
                        })
                    } else {
                        this.confirmLoading = false
                    }
                })
            },
            handleCancel () {
                this.visible = false
            }
        }
    }
</script>
